<!DOCTYPE html>
<html lang="utf-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="./component/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="./component/mescroll/mescroll.min.css">
    <style type="text/css">
        body{
            height: 100%;
        }
        .container, .page {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .news-list li {
            padding: 16px;
            border-bottom: 1px solid #eee;
        }
        .news-list .new-content {
            font-size: 14px;
            margin-top: 6px;
            margin-left: 10px;
            color: #666;
        }
        .bold-font{
            font-size: 18px;
            font-weight: bold;
        }
        .mescroll-totop {
            z-index: 9990;
            position: fixed;
            right: 10px;
            bottom: 60px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            opacity: 0;
        }

        .green-background{
            background-color: #1aad19;
        }

        .weui-popup__container--visible .weui-popup__overlay {
            opacity: 1;
        }
        /* .big-wid{
            width: 90%;
        } */
    </style>
</head>
<body>
    <input type="hidden" id="startTime">
    <input type="hidden" id="endTime">
    <input type="hidden" id="event" value="all">
    ${users}
    <div class="container" id="container">
        <div class="page tabbar js_show">
            <div class="page__bd" style="position:relative;height: 100%;">
                <div style="position: relative;height:6%;background-color:#f7f7f8">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p id="dateTimeP">2017-08-12 > 2017-09-10</p>
                        </div>
                        <div class="weui-cell__ft" style="margin-left:13px;"><p>
                            <a style="color:#000" href="javascript:;" class="open-popup" data-target="#pop"> 筛选</a>
                        </div>
                    </div>
                </div>
                <div style="position: relative;height:1%;"></div>

                <div class="weui-tab" style="height:93%;">
                    <div id="eventListDiv" class="weui-tab__panel mescroll">
                        <ul id="dataList" class="news-list">
                            <!--<li>-->
                                <!--<p>【新闻1】标题标题标题标题</p>-->
                                <!--<p class="new-subEventType">内容内容内容内容内容内容内容内容内容</p>-->
                            <!--</li>-->
                        </ul>

                    </div>
                    <!--<div id="eventChartDiv" class="weui-tab__panel">-->
                        <!--图表-->
                    <!--</div>-->

                    <div class="weui-tabbar" style="z-index:5;">
                        <a href="../deviceInfo" class="weui-tabbar__item" data-tab="firstTab">
                                          <span style="display: inline-block;position: relative;">
                                              <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                              <!--<span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>-->
                                          </span>
                            <p class="weui-tabbar__label">设备信息</p>
                        </a>
                        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on" data-tab="secondTab">
                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                            <p class="weui-tabbar__label">设备事件</p>
                        </a>
                        <a href="../deviceManage" class="weui-tabbar__item" data-tab="thirdTab">
                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                            <p class="weui-tabbar__label">设备维护</p>
                        </a>
                        <a href="../remoteOpenDoor" class="weui-tabbar__item" data-tab="fourthTab">
                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                            <p class="weui-tabbar__label">远程开锁</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- 事件类型选择器 -->
    <div id="pop" class="weui-popup__container popup-bottom" >
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup">关闭</a>
                <h1 class="title">事件类型</h1>
            </div>
        </div>
        <div class="modal-content">
            <div class="weui-grids">
                <a href="javascript:;" data-type="all" class="weui-grid js_grid green-background" data-id="dialog">
                    <!--<div class="weui-grid__icon">-->
                        <!--全部-->
                    <!--</div>-->
                    <p  class="weui-grid__label">
                        全部
                    </p>
                </a>
                <a id="" href="javascript:;" data-type="1" class="weui-grid js_grid" data-id="dialog">
                    <!--<div class="weui-grid__icon">-->
                        <!--开门-->
                    <!--</div>-->
                    <p class="weui-grid__label">
                        开门
                    </p>
                </a>
                <a href="javascript:;" data-type="2"  class="weui-grid js_grid" data-id="progress">
                    <!--<div class="weui-grid__icon">-->
                        <!--报警-->
                    <!--</div>-->
                    <p class="weui-grid__label">
                        报警
                    </p>
                </a>
                <a href="javascript:;" data-type="3" class="weui-grid js_grid" data-id="msg">
                    <!--<div class="weui-grid__icon">-->
                        <!--提醒-->
                    <!--</div>-->
                    <p class="weui-grid__label">
                        提醒
                    </p>
                </a>
                <a href="javascript:;" data-type="10" class="weui-grid js_grid" data-id="msg">
                    <!--<div class="weui-grid__icon">-->
                    <!--提醒-->
                    <!--</div>-->
                    <p class="weui-grid__label">
                        安防
                    </p>
                </a>
            </div>
        </div>
    </div>

</div>
</body>

<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="./component/daterangepicker/jquery.daterangepicker.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="./component/mescroll/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    Date.prototype.Format = function(fmt) {
        var o = {
            "M+" : this.getMonth() + 1,
            "d+" : this.getDate(),
            "h+" : this.getHours(),
            "m+" : this.getMinutes(),
            "s+" : this.getSeconds(),
            "q+" : Math.floor((this.getMonth() + 3) / 3),
            "S" : this.getMilliseconds()
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    //初始化日期控件
    var now = new Date();
    var lastDay = new Date(now.getTime() - 3600000 * 24);
    $("#dateTimeP").html(lastDay.Format("yyyy-MM-dd") + " to " + now.Format("yyyy-MM-dd"));
    $("#startTime").val(lastDay.Format("yyyy-MM-dd"));
    $("#endTime").val(now.Format("yyyy-MM-dd"));


    $(document).ready(function(){
        //微信远程开锁子事件
        var weixinRemoteOpenDoorEventType = 101;

        //获取用户列表.
        var users = [[${users}]];
        var userArray = null;
        if (users != null && users.length > 0) {
            userArray = users;
        }
        var eventId = [[${eventId}]];
        //事件id,不为空，此处弹出一个框.
        if (eventId != null) {

            $.ajax({
                type: "post",
                url: "/eventPage?pageNum="+1 + "&pageSize="+10,
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify({"id": eventId}),
                dataType: "json",
                success: function (data) {
                    if (data.success == "true") {
                        var allData = data.data;
                        var list = data.data.list;
                        var pd = list[0];
                        var title = "";
                        var subEvent = "";
                        var date = new Date(pd.createTime);
                        if (pd.eventType == 1 && pd.subEventType == weixinRemoteOpenDoorEventType){
                            title = "微信远程开门"
                            subEvent = "[" +date.Format("yyyy-MM-dd hh:mm")+"]";
                        } else {
                            var userName = getOpenDoorUserName(pd.eventType, pd.subEventType, pd.content);
                            if (userName != null && userName != '') {
                                subEvent +=  "\"" + userName + "\"回来了。 </br>[" +date.Format("yyyy-MM-dd hh:mm")+"]";
                            } else {
                                subEvent += "\"" +  (pd.content !=null ? pd.content : "")  + "\"回来了。 </br>【" +date.Format("yyyy-MM-dd hh:mm")+"]";
                            }
                            title = getSubEvent(pd);
                        }

                        $.alert({
                            title: title,
                            text: subEvent,
                            onOK: function () {
                                //点击确认
                            }
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });


        }
        //初始化上落下啦控件.
        var mescroll = new MeScroll("eventListDiv", {
            up: {
                clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
                callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                toTop:{ //配置回到顶部按钮
                    src : "./images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    offset : 1000
                },
                page:{
                    size : 20,
                }
            }
        });

        var $dateRangePicker = $('#dateTimeP').dateRangePicker(
            {
                language:'cn',
                extraClass:"big-wid",
                getValue: function()
                {
                    return this.innerHTML;
                },
                setValue: function(s, s1, s2)
                {
                    this.innerHTML = s;
                    $("#startTime").val(s1);
                    $("#endTime").val(s2);


                }
            });
        //当点击确定时，重新刷新界面
        $dateRangePicker.bind('datepicker-apply',function(event,obj){
            //重新拉取数据
            mescroll.resetUpScroll();
        })
        //事件类型选择
        $(".weui-grids > a").on("click", function () {
            //关闭弹出框
            $.closePopup();
            //设置筛选类型
            var eventType = $(this).data("type");
            $("#event").val(eventType);
            //设置高亮
            $(".weui-grids > a").removeClass('green-background');
            $(this).addClass('green-background');
            //重新拉取数据
            mescroll.resetUpScroll();
        });


        /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function getListData(page){
            //联网加载数据
            getListDataFromNet(page.num, page.size, function(curPageData){
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                mescroll.endSuccess(curPageData.length);

                //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
                setListData(curPageData);
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endErr();
            });
        }


        /*设置列表数据*/
        function setListData(curPageData){
            var listDom=document.getElementById("dataList");
            for (var i = 0; i < curPageData.length; i++) {
                var pd=curPageData[i];
                var event ="";
                var subEvent ="";
                var createTime = new Date(pd.createTime).Format("yyyy-MM-dd hh:mm:ss");

                if (pd.eventType == 1) {
                    event ="开门";
                } else if (pd.eventType == 2) {
                    event ="报警";
                } else if (pd.eventType == 3) {
                    event ="提醒";
                } else if (pd.eventType == 10) {
                    event ="安防";
                }
                var title = "[" + event +"]   " + createTime ;
                subEvent = getSubEvent(pd);

                //主事件类型是开门 并且 次事件类型  不是 微信远程开锁
                if (pd.eventType == 1 && pd.subEventType != weixinRemoteOpenDoorEventType) {
                    var userName = getOpenDoorUserName(pd.eventType, pd.subEventType, pd.content);
                    if (userName != null && userName != '') {
                        subEvent += "," + userName + "回家了";
                    } else {
                        subEvent += "," + (pd.content !=null ? pd.content : "")  + "回家了";
                    }
                }

                var str='<p class="bold-font">'+title+'</p>';
                str+='<p class="new-subEventType">'+subEvent+'</p>';

                var liDom=document.createElement("li");
                liDom.innerHTML=str;
                listDom.appendChild(liDom);
            }
        }


        function getSubEvent(pd){
            var subEvent ="";
            if (pd.subEventType == 1) {
                subEvent = "指纹开门";
            } else  if (pd.subEventType == 2) {
                subEvent = "密码开门";
            } else  if (pd.subEventType == 3) {
                subEvent = "卡开门";
            } else  if (pd.subEventType == 4) {
                subEvent = "钥匙开门";
            } else  if (pd.subEventType == 5) {
                subEvent = "遥控开门";
            } else  if (pd.subEventType == 6) {
                subEvent = "智能锁被撬";
            } else  if (pd.subEventType == 7) {
                subEvent = "强行开门";
            } else  if (pd.subEventType == 8) {
                subEvent = "指纹开锁被冻结";
            } else  if (pd.subEventType == 9) {
                subEvent = "密码开锁被冻结";
            } else  if (pd.subEventType == 10) {
                subEvent = "卡开锁被冻结";
            } else  if (pd.subEventType == 11) {
                subEvent = "钥匙开锁被冻结";
            } else  if (pd.subEventType == 12) {
                subEvent = "遥控开锁被冻结";
            } else  if (pd.subEventType == 13) {
                subEvent = "低电量电压";
            } else  if (pd.subEventType == 14) {
                subEvent = "忘拔钥匙";
            } else  if (pd.subEventType == 15) {
                subEvent = "锁门提醒";
            } else  if (pd.subEventType == 16) {
                subEvent = "敲门提醒";
            } else  if (pd.subEventType == 17) {
                subEvent = "SOS提醒";
            } else  if (pd.subEventType == 23) {
                subEvent = "布防";
            } else  if (pd.subEventType == 24) {
                subEvent = "撤防";
            } else if (pd.subEventType == 101) {
                subEvent = "微信远程开锁";
            }
            return subEvent;
        }

        function getOpenDoorUserName( eventType,  subEvent, userCode){
            if (eventType == 1) {
                var matchAddUsertype = subEvent - 1;
                if (userArray != null) {
                    var userlength = userArray.length;
                    for (var i=0;i<userlength;i++) {
                        var user = userArray[i];
                        if (user.userCode == userCode && matchAddUsertype == user.type) {
                            return user.userName;
                        }
                    }
                }
                return null;
            }
        }

        var dataTag=1;
        $(".btn-change").click(function(){
            if (dataTag==1) {
                dataTag=2;
                $(this).html("已模拟后台修改信息 <b>2</b> , 请下拉刷新");
            } else{
                dataTag=1;
                $(this).html("已模拟后台修改信息 <b>1</b> , 请下拉刷新");
            }
        });


        /*联网加载列表数据*/
        function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
            var startTime = $("#startTime").val() + ' 00:00:00';
            var endTime = $("#endTime").val() + ' 23:59:59';
            var eventType = $("#event").val();
            var queryData = {"startTime": startTime, "endTime": endTime};
            if (eventType != "all") {
                queryData.eventType = eventType;
            }
            $.ajax({
                type: "post",
                url: "/eventPage?pageNum="+pageNum + "&pageSize="+pageSize,
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(queryData),
                dataType: "json",
                success: function (data) {
                    if (data.success == "true") {
                        var allData = data.data;
                        var list = data.data.list;
                        successCallback&&successCallback(list, allData.total);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    errorCallback&&errorCallback();
//
//                    var responseData = JSON.parse(XMLHttpRequest.responseText);
//                    alert(responseData.exceptionObj.message);
                }
            });
        }




        //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
        document.ondragstart=function() {return false;}
    });
</script>

</html>
